<!--
 * @Author: 230800029 rixing.liu@hytera.com
 * @Date: 2024-04-19 13:41:32
 * @LastEditors: 230800029 rixing.liu@hytera.com
 * @LastEditTime: 2024-04-19 14:49:36
 * @FilePath: /vue3-pg/src/views/todolist.vue
 * @Description: 
 * Copyright (c) 2024 by rixing.liu, All Rights Reserved.
-->
<template>
  <div class="todolist">
    <h1>Todo List</h1>
    <a-button @click="todoListStore.doneAll" type="primary">全部完成</a-button>

    <ul class="todolist-list">
      <li
        class="todolist-list-item showBtn"
        v-for="(todo, index) in todoListStore.list"
        :class="{ done: todo.done }"
        :key="index"
        @click="toggleCompelted(todo)"
      >
        <span class="text">{{ todo.name }}</span>
        <div class="btn">
          <a-button type="primary" shape="circle" @click="deleteTodo(todo)">
            <icon-delete />
          </a-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { useTodoListStore } from "@/store";
import { TodoItem } from "@/store/modules/todolist/type";

const todoListStore = useTodoListStore();

const toggleCompelted = (todo: TodoItem) => {
  todoListStore.updateOne(todo.id as string, { done: !todo.done });
};

const deleteTodo = (todo: TodoItem) => {
  todoListStore.deleteOne(todo.id as string);
}

</script>
<style scoped lang="less">
.todolist {
  &-list {
    &-item {
      padding: 10px;
      font-size: 20px;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
    }

    .btn {
      margin-left: 10px;
      opacity: 0;
      transition: opacity ease 0.2s;
      transition-delay: 0.2s;
    }
    .showBtn:hover {
      .btn {
        opacity: 1;
      }
    }
    .done {
      .text {
        text-decoration: line-through;
      }
    }
  }
}
</style>
